<template>
	<x-border title="选择商品" type="focus" icon="icon-5333-wubfen">
		<div class="add-box">
			<div class="addBox-list">
				<div class="addBox-list_input">
					<input @input="change" v-model="paraData.name" placeholder="请输入名称">
				</div>
				<ul class="addBox-list_ul">
					<li class="addBox-list_li" v-for="(selectI,indexs) in viewModel" :key="indexs" @click="addList(selectI)">
						<el-image class="addBox-list_img" :src="$ala.urlImage(selectI.thumbnailUrl)"></el-image>
						<div class="addBox-list_right">
							<div class="list_right-title">{{selectI.name}}</div>
							<div class="list_right-title2">{{selectI.bn}}</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</x-border>
</template>

<script>
	import ala from 'ala'
	export default {
		data() {
			return {
				viewModel: [],
				paraData: {
					pageIndex: 1,
					name: ''
				}
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.paraData.key = this.$ala.urlQuery('Key')
				if (!this.paraData.key) {
					this.paraData.key = this.$ala.urlQuery('key')
				}
				var repones = await this.$ala.httpPost('Api/ShopStore/NoActivityProduct', this.paraData)
				this.viewModel = repones.result
			},
			addList(vData) {
				this.$emit('addChang', vData)
			},
			change() {
				this.init()
			}
		}
	}
</script>


<style lang="scss" scoped>
	.add-box {
		display: flex;
		align-items: center;

		.addBox-list {
			width: 700px;
			height: 600px;
			border: 1px solid #e5e5e5;
			overflow-y: auto;

			.addBox-list_input {
				width: 100%;
				padding: 3px;

				input {
					outline: none;
					width: 100%;
					height: 25px;
					line-height: 25px;
					padding: 0px 10px;
					border: 1px solid #d9e5f6;
				}
			}

			.addBox-list_ul {
				.addBox-list_li {
					display: flex;
					padding: 5px 15px;
					cursor: pointer;

					.addBox-list_img {
						width: 100px;
						height: 100px;
					}

					.addBox-list_right {
						padding-left: 20px;
						flex: 1;
						min-width: 0;
					}

					.list_right-title {
						font-size: 15px;
					}

					.list_right-title2 {
						font-size: 13px;
						color: #999999;
						margin-top: 6px;
					}

					.list-list-icon {
						font-size: 12px;
					}

					&:hover {
						background-color: #dff1fb;
					}
				}
			}
		}
	}
</style>